import styles from "./index.module.scss";
import { Pagination, Spin } from "antd";
import { useDispatch, useSelector } from "react-redux";
import closeBtn from "@/assets/public/close-btn.png";
import closeBtnLight from "@/assets/public/close-btn-light.png";
import searchBtn from "@/assets/public/icon-search.png";
import searchBtnLight from "@/assets/public/icon-search-light.png";
import { setLayers } from "@/store";
import SelectProjectModel from "@/component/selectProjectModel";
import { laborCostList } from "@/api/operate";
import { useEffect, useState, useContext } from "react";
import { filterTime } from "@/hooks/tool";
import { globalContext } from "@/context/overall";

export default function Model(props) {
  const dispatch = useDispatch();
  const globalData = useContext(globalContext);
  const { name } = props;
  const [list, setList] = useState([]);
  const [query, setQuery] = useState({
    limit: 10,
    page: 1,
  });
  const [total, setTotal] = useState(0);
  const theme = useSelector((state) => state.theme);
  const layers = useSelector((state) => {
    return state.layers;
  });
  useEffect(() => {
    initData();
  }, [query]);
  const initData = () => {
    laborCostList(query).then((res) => {
      console.log(res);
      if (res?.code === 0) {
        setList(res.data.list);
        setTotal(res.data.totalCount);
      }
    });
  };
  const handleClose = () => {
    dispatch(
      setLayers({
        query: {},
        name: "",
        other: {},
      })
    );
  };
  const getSelectValue = (value) => {
    console.log(value);
  };
  const changeSize = (current, size) => {
    setQuery({
      limit: size,
      page: current,
    });
  };
  return (
    <div className={styles.model}>
      <header className={styles.header}>
        {theme ? (
          <img
            style={{
              width: "20px",
              height: "22px",
            }}
            onClick={handleClose}
            src={closeBtnLight}
            alt="加载中..."
          />
        ) : (
          <img
            style={{
              width: "20px",
              height: "22px",
            }}
            onClick={handleClose}
            src={closeBtn}
            alt="加载中..."
          />
        )}
        <span className={styles.title}>{name}</span>
      </header>
      <div className={styles.inputContainer}>
        <SelectProjectModel getSelectValue={getSelectValue.bind(this)} />
        <div className={styles.searchBtn}>
          <span>搜索</span>
          {theme ? (
            <img
              className={styles.searchBtnImg}
              src={searchBtnLight}
              alt="加载中..."
            />
          ) : (
            <img
              className={styles.searchBtnImg}
              src={searchBtn}
              alt="加载中..."
            />
          )}
        </div>
      </div>
      <div className={styles.searchBoxs}>
        <Spin
          tip="Loading..."
          wrapperClassName="spin"
          spinning={list.length === 0}
        >
          <div className={styles.searchBox}>
            <div className={styles.listHeader}>
              <div className={styles.listItem}>一级项目名称</div>
              <div className={styles.listItem}>二级项目名称</div>
              <div className={styles.listItem}>年月</div>
              <div className={styles.listItem}>部门</div>
              <div className={styles.listItem}>产值</div>
              <div className={styles.listItem}>比例</div>
              <div className={styles.listItem}>成本</div>
            </div>
            <div className={styles.listContent}>
              {list.map((item, index) => {
                return (
                  <div className={styles.list} key={index}>
                    <div className={styles.listItem}>
                      <span className="text-overflow">
                        {item.level1Project.level1_project_name}
                      </span>
                    </div>
                    <div className={styles.listItem}>
                      <span className="text-overflow">
                        {item.level2Project.level2_project_name}
                      </span>
                    </div>
                    <div className={styles.listItem}>
                      <span className="text-overflow">
                        {filterTime(item.dateMonth, "YYYY-MM")}
                      </span>
                    </div>
                    <div className={styles.listItem}>
                      <span className="text-overflow">
                        {item.department?.department_name
                          ? item.department.department_name
                          : "无"}
                      </span>
                    </div>
                    <div className={styles.listItem}>
                      <span className="text-overflow">{item.outputValue.output_value}</span>
                    </div>
                    <div className={styles.listItem}>
                      <span className="text-overflow">{item.backToBack_percent}</span>
                    </div>
                    <div className={styles.listItem}>
                      <span className="text-overflow">{item.amount}</span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </Spin>
      </div>
      <div className={styles.pagination}>
        <Pagination
          total={total}
          showTotal={(total) => `共 ${total} 条`}
          defaultPageSize={query.limit}
          defaultCurrent={query.page}
          onChange={changeSize}
        />
      </div>
    </div>
  );
}
